<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="UTF-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <link rel="stylesheet" href="../css/reset.css">
    <link rel="stylesheet" type="text/css" href="../css/aui.css" />
    <title>精品出货</title>

    <style>
        body {
            background: #FFFFFF;
        }
        
        .clearfix:after {
            content: ".";
            display: block;
            height: 0;
            clear: both;
            visibility: hidden
        }
        
        .title-img {
            width: 3rem;
            height: 3rem;
            margin: 0.5rem 0.5rem 1rem 0.5rem;
            float: left;
        }
        
        .title-text {
            float: left;
            margin-top: 0.5rem;
        }
        
        .title-color {
            color: #999999;
        }
        
        .yellow {
            color: #ffc73c;
        }
        
        .bg {
            width: 100%;
            height: 0.5rem;
            background-color: #f2f2f2;
        }
        
        .msg-title {
            border-bottom: 1px solid #e2e2e2;
        }
        
        .logList {
            position: relative;
            height: 3.2rem;
        }
        /*.circle-color {
                border: 5px solid #ffc73c;
            }*/
        /*.bigCircle {
            position: absolute;
            top: 0.35rem;
            left: 0.35rem;
            top: 30%;
            border: 10px solid #ddd;
            border-radius: 50%;
            opacity: 0.6;
        }*/
        
        .circle {
            position: absolute;
            top: 0;
            left: 0.55rem;
            top: 30%;
            border: 5px solid #ddd;
            border-radius: 50%;
            background: #FFFFFF
        }
        
        .logistic {
            border-left: 1px solid #e2e2e2;
            height: 3.2rem;
            padding: 0 0.75rem;
            margin-left: 0.75rem;
        }
    </style>
</head>

<body>
    <!-- 头部  s -->
    <header class="aui-bar aui-bar-nav aui-bar-light" style="background: #4e536c;">
        <a class="aui-pull-left aui-btn" onclick="back()">
            <span class="aui-iconfont aui-icon-left" style="color: #FFFFFF;"></span>
        </a>
        <div class="aui-title" style="color: #FFFFFF;">物流信息</div>
    </header>
    <div class="content">

        <template id="list">
        <div class="title clearfix">
            <div class="title-img">
                <img alt="精品图片" />
            </div>
            <div class="title-text">
                <!--<div class="title-color">物流状态：
                    <span class="yellow aui-font-size-16"> 快递正在路上</span>
                </div>-->
                <div class="title-color aui-font-size-12">运单编号：
                    <span>{{number}}</span>
                </div>
                <div class="title-color aui-font-size-12">信息来源：
                    <span>{{shipname}}</span>
                </div>
            </div>
        </div>
        <div class="bg"></div>
        <div class="msg">
            <div class="aui-font-size-16 aui-padded-t-15 aui-padded-b-15 aui-padded-l-10 msg-title">物流跟踪信息</div>
            <div class="">
                <ul>
                    {{each list as value}}
                    <li class="logList">
                        <div class="logistic">
                            <!--<i class="bigCircle"></i>-->
                            <i class="circle"></i>
                            <div>{{value.status}}</div>
                            <div style=" color: #8c8c8c;">{{value.time}}</div>
                        </div>
                    </li>
                    {{/each}}
                </ul>
            </div>
        </div>
         </template>
    </div>



    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
    <script src="../js/comment.js"></script>
    <script src="../js/template.js"></script>
    <script src="../js/aui-toast.js"></script>


    <script>
        var obj = window.localStorage.getItem('dataMsg');
        window.onload = function() {
            var toast = new auiToast({})
            obj = JSON.parse(obj);

            var data = {
                    shipCode: obj.shipcode,
                    shipSn: obj.shipsn,
                    orderId: obj.id,
                }
                // var data = {
                //     shipCode: "JD",
                //     shipSn: "69717864303",
                //     orderId: "187"
                // }
            showDefault('loading')
            load(data);

            function load(data) {
                $.ajax({
                    type: 'post',
                    url: url + 'shipment/order/logistics/search',
                    data: data,
                    success: function(res) {
                        if (res.code == 200) {
                            toast.hide();
                            var res = JSON.parse(res.msg);
                            var html = template("list", res);
                            $(".content").append(html);
                            $('.title-img img').attr('src', obj.img);
                            $($('.logList')[0]).css("color", "#ffc73c")
                        } else {
                            showDefault('loading');
                            setTimeout(function() {
                                window.location.href = 'empty.html';
                            }, 2000)
                        }

                    }
                })
            }

            function openNewPage(url) {
                if (isAndroid()) {
                    window.WebViewJavascriptBridge.callHandler(
                        'openNewPage', {
                            'param': url
                        },
                        function(responseData) {}
                    );
                } else if (isIOS()) {
                    window.location.href = url
                } else {
                    window.location.href = url
                }
            }

            function showDefault(type) {
                switch (type) {
                    case "loading":
                        toast.loading({
                            title: "加载中",
                            duration: 2000
                        }, function(ret) {

                        });
                        break;

                }
            }
        }
    </script>
</body>

</html>